<template>
	<view class="">
		<uni-nav-bar shadow :fixed="true" left-icon="left" title="提交订单"  status-bar @clickLeft="back" :border="false"/>
		<view class="submitOrder">
			<view class="first" style="height: 260rpx;">
				<view class="adress" style="margin-top:10rpx; " @click="gotoPage('adress')">
					<view class="" style="display: flex; justify-content: space-between;">
						<view class="">
							<uni-tag  :text="order.adress.label" type="primary"
							custom-style="background-color: #E1F1FE; border-color: #E1F1FE; color:#333333"/> 
							<text style="margin-left: 18rpx; font-weight: 600; font-size: 34rpx;">
								{{order.adress.provinceName}}{{order.adress.cityName}}{{order.adress.districtName}}
							</text>
							<view style="margin-left: 70rpx; margin-top: 15rpx;">
								{{order.adress.detail}}
							</view>
						</view>

						<uni-icons type="right" size="12" style="font-weight: 600; color: #666;"></uni-icons>
					</view>
					<view class="" style="color: #666; font-size: 27rpx; margin-top: 22rpx;">
						{{order.adress.consignee}}{{order.adress.sex}} {{order.adress.phone}}
					</view>
				</view>
				<view class="delivery" style="display:flex; justify-content: space-between; margin-top: 40rpx;">
					<text style="color: #333; font-weight: 600; font-size: 28rpx;">立即送出</text>
					<view class="" style="color: #007AFF; font-size: 27rpx; " @click="show = true">
						{{time}}送达
						<uni-icons type="right" size="12" style="font-weight: 600; color: #666; margin-left: 15rpx;"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="second">
				<text style="font-size: 28rpx; color: #333; font-weight: 500;">{{order.storeName}}</text>
				<u-line length="98%" margin="28rpx 10rpx 28rpx 10rpx"></u-line>
				<view v-for="(item,index) in order.productList" :key="index" class="products">
					<view class="product">
						<img :src="item.image" alt="" style="height: 150rpx;width: 150rpx;border-radius: 10rpx;"/>
						<view class="" style="font-size: 28rpx; color: #333;margin: 20rpx;">
							<view class="">{{item.name}}</view>
							<view class="" style="font-size: 26rpx;color: #666;margin-top: 15rpx;">x{{item.number}}</view>
						</view>
					</view>
					<view class="price" style="font-weight: 600; margin: 20rpx;">
						￥{{item.amount}}
					</view>
				</view>
				<view class="" style="margin: 20rpx;font-size: 26rpx; color: #333;display: flex; justify-content: space-between;">
					<view class="">配送费</view>
					<view class="" style="font-weight: 600;">
						￥{{order.delivery}}
					</view>
				</view>
				<u-line length="98%" margin="28rpx 10rpx 28rpx 10rpx"></u-line>
				<view class="" style="font-size: 28rpx; color: #333;display: flex;justify-content: flex-end;">
					合计 <text style="font-weight: 600;margin-right: 20rpx; margin-left: 20rpx;">￥{{order.sum}}</text> 
				</view>
			</view>
			
			<view class="third" >
				<view class="" style="display: flex; justify-content: space-between;margin-top: 20rpx;" @click="gotoPage('remark')">
					<text style="font-size: 30rpx;">备注</text>
					<view class="">
						<text style="font-size: 26rpx; color: #666;">{{remark}}</text>
						<uni-icons type="right" size="16" style="color:#666; margin-left: 15rpx;"></uni-icons>
					</view>
				</view>
				
				<view class="" style="display: flex; justify-content: space-between; margin-top: 36rpx;">
					<text style="font-size: 30rpx;">发票</text>
					<text style="font-size: 26rpx; color: #666;">请联系商家提供</text>
				</view>
				
				<view class="" style="height: 28rpx;">
					<!-- 空的，为了留个底 -->
				</view>
			</view>
			
			<view class="" style="height: 200rpx;">
				<!-- 空的，为了留个底 -->
			</view>
		</view>
		
		<block v-if="!show">
			<shoppingCartVue :page="page"></shoppingCartVue>
		</block>
		
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
import { h } from "vue"
import shoppingCartVue from "../../components/shoppingCart.vue"
import {queryDefaultAddress} from '@/api/adress.js'
import {shoppingCartList} from '@/api/shoppingCart.js'
	export default {
		components:{
			shoppingCartVue
		},
data() {
			return {
				time:'19:43',
				time2:'19:43',
				hour:0,
				minutes:0,
				date:'',
				remark:'暂无备注',
				show: false,
                columns: [['立即配送','10:00','10:30','11:00','11:30', '12:00','12:30',
					'13:00','13:30','14:00', '14:30','15:00','15:30','16:00','16:30', '17:00','17:30',
					'18:00','18:30','19:00', '19:30','20:00','20:30','21:00','21:30', '22:00','22:30','23:00']],
				order:{
					status:0,
					storeName:this.$store.getters.storeInfo.name,
					delivery:6,
					sum: 6,
					time:'2024-5-11 17:35:15',
					number:'8888888888',
					orderTime:'2024-5-11 17:41:06',
					method:'微信',
					adress:{
						userId: 1,
						consignee: "荧",
						sex: "先生",
						phone: "15977226401",
						provinceCode: "450000",
						provinceName: "广西壮族自治区",
						cityCode: "450300",
						cityName: "桂林市",
						districtCode: "450323",
						districtName: "灵川县",
						detail: "灵田镇桂林电子科技大学花江校区",
						label: "家",
					},
					productList:[
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
							
						},
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
						},
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
						},
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
						},
					]
				},
				page:'pay',
			}
		},
		onLoad(option){

			if(option != null){
				this.remark = option.newRemark
				this.$store.state.remark = option.newRemark
			}
		},
		onReady(){

			queryDefaultAddress().then(res=>{
				this.order.adress = res.data
			})
			// 获取当前时间
			const now = new Date();
			const year = now.getFullYear();
			const month = ('0' + (now.getMonth() + 1)).slice(-2);
			const day = ('0' + now.getDate()).slice(-2);
			this.date = '' + year + '-' + month + '-' + day
			// 获取当前详细时间
			var hours = now.getHours().toString().padStart(2, '0');
			var minutes = now.getMinutes().toString().padStart(2, '0');
			
			this.minutes = parseInt(minutes)
			this.hour = parseInt(hours)
			
			this.changeTimes(this.hour,this.minutes)
			this.$store.state.delivery = 6
			// this.order.sum = this.$store.state.shoppingCartSum + 6
			
			shoppingCartList(this.$store.state.storeId).then(res=>{
				this.order.productList = res.data
				let sum = 0
				res.data.forEach(function (item, index){
					sum = sum + item.amount * item.number
				})
				this.order.sum = sum + this.$store.state.delivery
			})
		},
		onUnload(){
			this.$store.state.delivery = 0
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			gotoPage(page){
				let remark = this.remark == '暂无备注' ? '' : this.remark
				uni.navigateTo({
					url:"/pages/"+page+"/"+page + '?remark=' + remark
				})
			},
			changeTimes(hours,minutes){
				let index = 0
				if(minutes<30){
					let m = minutes + 30
					this.time = hours.toString().padStart(2, '0')+':'+m.toString().padStart(2, '0')
					this.time2 = this.time
					index = (hours - 8)*2 - 1
					let columns = this.columns[0].slice(index)
					this.columns[0] = ["立即配送"]
					this.columns[0] = this.columns[0].concat(columns)
				}else{
					let m = (minutes + 30)%60
					let h = (hours + 1)%24
					
					this.time = h.toString().padStart(2, '0') +':'+ m.toString().padStart(2, '0')
					this.time2 = this.time
					index = (hours - 7)*2
					let columns = this.columns[0].slice(index)	
					this.columns[0] = ["立即配送"]
					this.columns[0] = this.columns[0].concat(columns)
					
				}
				const now = new Date();
				var seconds = now.getSeconds().toString().padStart(2, '0');
				
				this.$store.state.estimatedDeliveryTime = this.date + ' ' + this.time + ':' +seconds
				
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				if(e.value != '立即配送'){
					this.time = e.value
				}else{
					this.time = this.time2
				}
				const now = new Date();
				var seconds = now.getSeconds().toString().padStart(2, '0');
				this.$store.state.estimatedDeliveryTime = this.date + ' ' + this.time + ':' +seconds
				this.show = false
			},
			cancel(){
				this.show = false
			}
		}
	}
</script>

<style scoped>
.first, .second, .third{
	width: 89%;
	margin-left: 20rpx;
	border-radius: 15rpx;
	background-color: #fff;
	margin-top: 25rpx;
	padding: 22rpx;
}
.products{
	display: flex;
	justify-content: space-between;
	margin-top: 15rpx;
}

.product{
	display: flex;
	
}
</style>
